<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1. 引入react核心库 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <!-- 2. 引入react-dom 用于支持react操作dom -->
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="./node_modules/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>
<script type="text/babel">
  // 3. 创建React元素/创建虚拟dom-使用JSX语法
  /*
  * jsx语法规则
  * 1.定义虚拟DOM时,不要写引号。
  * 2.标签中混入JS表达式时要用{}
  * 3. 样式的类名指定不要用class,要用className
  * 4. 只允许有一个根节点（3种解决办法[用一个div标签包裹/<></>/React.Fragment标签]）
  *   4.1 3种解决办法的区别：前一种会生成多余的标签结构，后两种不会在浏览器中生成多余标签
  *   4.2 推荐用<></>
  * 5. 内联样式,要用style={{key:value}}的形式去写。
  * 6. 标签必须闭合
  * 7. 标签首字母
  *   7.1  (1),若小写字母开头,则将该标签转为htm中同名元素,若htm中无该标签对应的同名元素,则报错；
      7.2   (2),若大写字母开头, react就去演染对应的组件,若组件没有定义,则报错。
  *  语句和表达式
  * 8. 注释 需要在{} 中写
  * 9. false, null, undefined, and true 是合法的子元素，并不会被渲染，直接忽略。
  */
  let count = 100
  let age = 20
  let arr = [1, 2, 3]
  let obj = {
    name: 'zhangsan',
    age: 18
  }
  let isShow = true // null undefined 
  let other = null
  let other1 = undefined
  let item = <>
    <h2>表达式</h2>
    <ul>
      <li>年龄:{age}</li>
      <li>年龄加总数{age + count}</li>
      <li>arr-map{arr.map(item => item + 2)}</li>
      <li>isShow: {isShow ? '显示' : '隐藏'}</li>
      <li>other:{other}</li>
      <li>other1:{other1}</li>
      <li>obj.name:{obj.name}</li>
      <li>obj.age:{obj.age}</li>
    </ul>
    <h2>语句</h2>
    <p>
      {
        "(1).if(){}"
      }
      <br />
      {
        "(2).for"
      }
      <br />

      {
        "(3).switch(){case 1:xxxx}"
      }
    </p>
  </>
  //  设置根节点
  let root = ReactDOM.createRoot(document.getElementById('root'))
  // 将虚拟dom渲染到页面上
  root.render(item)
</script>